<!--
 * @Descripttion: 
 * @version: 
 * @Author: Lome
 * @Date: 2020-05-06 11:48:54
 * @LastEditors: Lome
 * @LastEditTime: 2020-05-13 19:31:22
 -->
<template>
  <div style="padding:30px 20px">
    <el-row class="flex flex-s" style="margin:20px 0">
      <el-button type="primary" @click="openGoodsList">选择物资</el-button>
    </el-row>
    <el-row class="flex flex-s">已有物资</el-row>
    <el-row style="margin:20px 0">
      <el-table
        :data="checkedGoodsList"
        style="width: 800"
        max-height="500"
        stripe
        border=""
        size="mini"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          :prop="tableConfig.KeyWords"
          :label="tableConfig.KeyWords"
          width="width"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop="name" label="名称" width="width"></el-table-column>
      </el-table>
    </el-row>
    <el-row :gutter="20" style="margin:20px 0">
      <el-row class="flex flex-s">配置项</el-row>
      <el-row :gutter="20">
        <el-form style="text-align: left;" :inline="true" label-width="200">
          <el-col :span="10">
            <el-form-item label="标题">
              <el-input v-model="tableConfig.title"></el-input>
            </el-form-item>
            <el-form-item label="弹窗宽">
              <el-input v-model="tableConfig.dialogWidth"></el-input>
            </el-form-item>
            <el-form-item label="key">
              <el-input v-model="tableConfig.KeyWords"></el-input>(数据唯一标识)
            </el-form-item>
            <el-form-item label="选择" style="display:block">
              <el-radio-group v-model="tableConfig.selectionType">
                <el-radio :label="1">单选</el-radio>
                <el-radio :label="2">多选</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="禁选" style="display:block">
              <el-checkbox v-model="tableConfig.disableSelect">开启禁选</el-checkbox>
            </el-form-item>
            <el-form-item label="确认按钮文本">
              <el-input v-model="tableConfig.ConfirmButtonText"></el-input>
            </el-form-item>
            <el-form-item label="取消按钮文本">
              <el-input v-model="tableConfig.CancelButtonText"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="序号" style="display:block">
              <el-checkbox v-model="tableConfig.showIndex">开启序号</el-checkbox>
            </el-form-item>
            <el-form-item label="选择框" style="display:block">
              <el-checkbox v-model="tableConfig.showSelection">开启选择框</el-checkbox>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-row>
    <selectedTable
      :onOff.sync="showDialog"
      :tableConfig="tableConfig"
      :selectedTableDate="selectedTableDate"
      :checkedselectedTableDate="checkedGoodsList"
      @submitGoods="submitGoods"
      @handelClickRow="handelClickRow"
      @CheckWhetherThe="CheckWhetherThe"
      :size="size"
      :current="current"
    >
      <template v-slot:header>表头 可放搜索组件</template>
      <template v-slot:pagination>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[15, 50, 100, 200]"
          :page-size="size"
          layout="->, sizes, prev, pager, next, jumper, total"
          :total="totalElements"
        ></el-pagination>
      </template>
    </selectedTable>
  </div>
</template>

<script>
import SelectedTable from "../../components/SelectedTable"
export default {
  components:{
    SelectedTable
  },
  data(){
    return{
      checkedGoodsList:[{
        name:'矩形吊柱',
        uuid:'ff8080817159943d01715eaff55f1842'
      }],//当前已选物资
      selectedTableDate:[],//表格数据
      showDialog:false,
      tableConfig:{ //配置项
        title:'选择标识类型库',//弹窗标题
        dialogWidth:'55%',//弹窗宽度
        tableMaxheight:'600',//表格最大高度
        showIndex:false,//开启序号
        showSelection:true,//开启选择框
        showLoading:false,//表格loading
        showLoadingText:'拼命加载中...',//加载的loading文字
        selectionType:2,//1单选 2多选
        disableSelect:true,//是否开启禁选功能 已选过的物资为禁选
        KeyWords:'uuid',//回显判断字段
        ConfirmButtonText:'提交',
        CancelButtonText:'关闭',
        tableColumn:[//列的配置项
          { 
           name:'物资名称',
           prop:'name',
           width:'auto',
           showTip:true,//超出显示toolTip模式 
          },{
            name:'uuid',
            prop:'uuid',
            width:'auto',
            showTip:true,
          },{
            name:'操作',
            width:'100',
            type:'click',
            text:['删除','编辑']
          },{
            name:'参与计算',
            width:'50',
            type:'render',
            render: (h, params) => {
              return h('input',{
                attrs:{
                  type:'checkbox',
                },
                domProps: {
                  checked: params.row.isPick==1,
                },
                on: {
                  click: this.nativeClickHandler.bind(this,params)
                },
                style:{
                  fontSize:'12px',
                  display:params.row.showPick==1?'block':'none'
                }
              },params.row.showPick)
            }
          },{
            name:'输入框测试',
            width:'auto',
            type:'render',
            render: (h, params) => {
              return h('input',{
                attrs:{
                  type:'text',
                },
                domProps: {
                  value: params.row.name,
                },
                on: {
                  blur: this.handerClickInput.bind(this,params)
                },
                'class': {
                  'el-input__inner': true,
                },
                style:{
                  fontSize:'12px',
                }
              })
            }
          }
        ],
      },
      current:1,
      size:15,
      totalElements:0
    }
  },
  watch:{
    "tableConfig.selectionType": function(val){
      console.log(val)
      if(val==1){
        this.checkedGoodsList=[this.checkedGoodsList[0]]
      }
    }
  },
  mounted(){
    this.getTableDate()
  },
  methods:{
    handerClickInput(scope){
      console.log('handerClickInput',scope)
    },
    CheckWhetherThe(selected,rows){
      // selected 0或false取消勾选+true勾选,rows勾选的数据-单选取第一项
      console.log('是否勾选',selected,rows)
    },
    nativeClickHandler(scope){
      console.log(scope)
      let init = scope.row.isPick==1?0:1
      this.selectedTableDate[scope.index].isPick = init
      this.selectedTableDate = JSON.parse(JSON.stringify(this.selectedTableDate))
    },
    // 点击操作的回调
    handelClickRow(btnType,scope){
      console.log('点击行的回调',btnType,scope.row)
    },
    getTableDate () {
      this.tableConfig.showLoading=true
      this.axios.get('/MKL/material/queryTotalMaterial?projectUuid=06b987ba-5263-4fb3-81a1-b51217e81201', {
        params: {
          name:'',
          spec:'',
          page:this.current-1,
          size:this.size
        },
        headers: {
            'instUuid': localStorage.instUuid
        },
      })
        .then(res => {
          console.log(res)
          this.tableConfig.showLoading=false
          this.selectedTableDate = res.data.content
          this.selectedTableDate.forEach(e=>{
              e.disabled = false,
              e.isPick = 0
            })
          this.totalElements = res.data.totalElements
        },err=>{
          console.log('err',err.response)
          if(err.response.status!==200){
            this.tableConfig.showLoading=false
            this.$message.error('数据获取失败')
          }
        })
    },
    openGoodsList(){
      this.showDialog=true
    },
    submitGoods(data){
      this.checkedGoodsList = data
    },
    // 分页相关
    handleSizeChange(size){
      this.size = size
      this.current =1
      this.getTableDate()
    },
    handleCurrentChange(current){
      this.current = current
      this.getTableDate()
    },
     // 搜索回调
    searchIsOk(data){
      // 三个参数 分别为专业 名称 部位
      let major = data.find(e=>e.name=='专业').model
      let name = data.find(e=>e.name=='图号').model
      let position = data.find(e=>e.name=='部位').model

      this.current = 1
      this.getTableDate(major,name,position)
    },
    selected (data) {
      console.log(data)
      if (data == '选择类别') {
        this.searchConfig.forEach(e => {
          if (e.name == '专业') {
            e.model = ''
          }
        })
      }
    },
  }
}
</script>

<style>

</style>
